@import "lib/styles/_helper.scss";

.yui-switch-wrap {
  position: relative;
  width: 44px;
  height: 22px;
  border-radius: 18px;
  border: none;
  background: $B300;
  cursor: pointer;
  .yui-switch-square {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: $B000;
    transition: all 300ms;
  }

  &:focus {
    outline: none;
  }

  &:active {
    .yui-switch-square {
      width: 22px;
    }
  }

  &.yui-switch-checked {
    background: $H500;
    .yui-switch-square {
      left: calc(100% - 21px);
    }

    &:active {
      .yui-switch-square {
        width: 22px;
        margin-left: -4px;
      }
    }
  }

  &.yui-switch-disabled {
    background: $B050;
    cursor: not-allowed;
  }

  &.yui-switch-checked.yui-switch-disabled {
    background: $H100;
    cursor: not-allowed;
  }

  &.yui-switch-sm {
    width: 26px;
    height: 14px;
    border-radius: 7px;
    .yui-switch-square {
      left: 2px;
      width: 10px;
      height: 10px;
      border-radius: 5px;
    }
    &.yui-switch-checked {
      .yui-switch-square {
        left: calc(100% - 13px);
      }
      &:active {
        .yui-switch-square {
          width: 12px;
          margin-left: -4px;
        }
      }
    }
    &:active {
      .yui-switch-square {
        width: 12px;
      }
    }
  }

  &.yui-switch-lg {
    width: 55px;
    height: 30px;
    border-radius: 18px;
    .yui-switch-square {
      top: 4px;
      left: 4px;
      width: 22px;
      height: 22px;
      border-radius: 11px;
    }

    &.yui-switch-checked {
      .yui-switch-square {
        left: calc(100% - 26px);
      }

      &:active {
        .yui-switch-square {
          width: 26px;
          margin-left: -4px;
        }
      }
    }

    &:active {
      .yui-switch-square {
        width: 26px;
      }
    }
  }
}
